{% extends "云商/后台/template.html" %}
{% block title %}{% endblock %}
{% block css %}
<style>
    .layui-form-label {
        width: 150px;
        text-align: center;
    }

    .SeavBox {
        padding-left: 150px;
        margin-left: 0;
    }
</style>

{% endblock %}
{% block body %}

<form class="layui-form layui-padding-3" action="">
    <div class="layui-form-item">
        <label class="layui-form-label layui-elip"><i class="layui-icon layui-icon-username"></i> 我的名称</label>
        <div class="layui-input-inline">
            <input type="text" name="user_name" placeholder="用户名" autocomplete="off" class="layui-input" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-elip">我的余额</label>
        <div class="layui-input-inline">
            <input type="number" name="money" placeholder="我的余额" autocomplete="off" class="layui-input" value="0.00"
                readonly>
        </div>
        <div class="layui-form-mid layui-text-em">
            <button type="button" class="layui-btn Yy-bgc-greey layui-btn-radius layui-btn-sm"
                lay-on="GoPay">去充值</button>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-elip"><i class="layui-icon layui-icon-password"></i> 我的密码</label>
        <div class="layui-input-inline">
            <input type="text" name="user_password" placeholder="我的密码" autocomplete="off" class="layui-input" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-elip"><i class="layui-icon layui-icon-email"></i> 我的邮箱</label>
        <div class="layui-input-inline">
            <input type="text" name="user_email" placeholder="我的邮箱" autocomplete="off" class="layui-input" value="">
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block SeavBox">
            <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">保存</button>
        </div>
    </div>

</form>

{% endblock %}
{% block js %}
<script>
    // 支付页弹层
    let pay_layer = `
   <div class="layui-padding-3 layui-panel">
    <div class="layui-form Yy-d-flex Yy-ai-cen" id="payForm">
        <span class="Yy-d-flex Yy-ai-cen">
            <svg class="icon Yy-mr-10 layui-font-22" aria-hidden="true">
                <use xlink:href="#icon-zhifubao"></use>
            </svg>
            <input lay-filter="PayRadio" type="radio" name="a" value="alipay" title="支付宝" checked>
        </span>
        <span class="Yy-d-flex Yy-ai-cen">
            <svg class="icon Yy-mr-10 layui-font-22" aria-hidden="true">
                <use xlink:href="#icon-weixinzhifu"></use>
            </svg>
            <input lay-filter="PayRadio" type="radio" name="a" value="wxpay" title="微信">
        </span>
        <span class="Yy-d-flex Yy-ai-cen">
            <svg class="icon Yy-mr-10 layui-font-22" aria-hidden="true">
                <use xlink:href="#icon-qqzhifu"></use>
            </svg>
            <input lay-filter="PayRadio" type="radio" name="a" value="qqpay" title="QQ钱包">
        </span>
        <span class="Yy-d-flex Yy-ai-cen">
            <svg class="icon Yy-mr-10 layui-font-22" aria-hidden="true">
                <use xlink:href="#icon-wangyinzhifu"></use>
            </svg>
            <input lay-filter="PayRadio" type="radio" name="a" value="bank" title="网银">
        </span>
        <span class="Yy-d-flex Yy-ai-cen">
            <svg class="icon Yy-mr-10 layui-font-22" aria-hidden="true">
                <use xlink:href="#icon-zhifu-jingdongzhifu"></use>
            </svg>
            <input lay-filter="PayRadio" type="radio" name="a" value="jdpay" title="京东">
        </span>
        <span class="Yy-d-flex Yy-ai-cen">
            <svg class="icon Yy-mr-10 layui-font-22" aria-hidden="true">
                <use xlink:href="#icon-chongzhi01"></use>
            </svg>
            <input lay-filter="PayRadio" type="radio" name="a" value="CloudPay" title="Yy云充值">
        </span>
    </div>

    <div class="layui-btn-container Yy-mt-30px">
        <button type="button" lay-on="PayBtn" class="layui-btn layui-btn-normal layui-btn-radius">确定充值</button>
    </div>
</div>

`;
</script>
<script>
    var ErrorUnique = []
    let PayMethod = "";

    // 更新最新数据
    axios({
        url: '/api/CloudShop/user/edit/',
        method: 'POST',
        data: {
            "id": Yyuser_info.id
        }
    }).then(res => {
        $('input[name="user_name"]').val(res.data.data.user_name);
        $('input[name="money"]').val(res.data.data.money);
        $('input[name="user_password"]').val(res.data.data.user_password);
        $('input[name="user_email"]').val(res.data.data.user_email);
    })



    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var util = layui.util;

        // 支付选择事件
        form.on('radio(PayRadio)', function (data) {
            var elem = data.elem; // 获得 radio 原始 DOM 对象
            var checked = elem.checked; // 获得 radio 选中状态
            var value = elem.value; // 获得 radio 值
            PayMethod = value;

        });
        // 提交事件
        form.on('submit(demo1)', function (data) {
            var field = data.field; // 获取表单字段值
            // 提供用户id
            field.id = Yyuser_info.id;
            if (YydeepEqual(Yyuser_info, field)) {
                layer.msg("当前数据未修改, 已取消Ajax")
                return false;
            } else {
                layer.confirm('你确定要修改成新的数据嘛? ', { icon: 3, title: 'Yy云提示' }, function (index) {
                    console.log(YyhasSameElements(ErrorUnique, field.user_email), field.user_email);
                    if (YyhasSameElements(ErrorUnique, field.user_email)) {
                        layer.msg("当前数据已被证实不可用, 请更换其它数据", { icon: 2 });
                    } else {
                        delete field.money;
                        axios({
                            url: '/api/CloudShop/user/edit/',
                            method: 'POST',
                            data: field
                        }).then(res => {
                            YySetLocatStorge(user_key, res.data.data);
                            setTimeout(() => {
                                YyRefresh();
                            }, 800);
                        }).catch(err => {
                            ErrorUnique.push(field.user_email);
                            console.log(ErrorUnique);
                        })
                    }

                    layer.close(index);
                });
            }




            // 此处可执行 Ajax 等操作
            // …
            return false; // 阻止默认 form 跳转
        });
        util.on('lay-on', {
            GoPay: () => {
                layer.open({
                    type: 1,
                    title: '<h2 class="layui-font-24 layui-font-red">请选择支付方式</h2>',
                    area: ['50%', '80%'], // 宽高
                    content: pay_layer
                });
                form.render($('#payForm'));
            },
            PayBtn: () => {
                if (PayMethod == 'CloudPay') {
                    layer.prompt({ title: '请输入充值金额(支持两位小数)', formType: 0 }, function (pass, index) {
                        layer.close(index);
                        layer.closeAll('page');
                        axios({
                            url: '/api/CloudShop/user/pay/yycloud/',
                            method: 'post',
                            data: {
                                'recharge_amount': pass,
                                "id": Yyuser_info.id
                            }
                        }).then(res => {
                            console.log(res);
                            $('input[name="money"]').val(res.data.data.money);
                            // 更新缓存
                            Yyuser_info.money = res.data.data.money;
                            YySetLocatStorge(undefined, Yyuser_info)
                        })

                    });
                } else {
                    layer.msg('该支付方式暂未开发, 敬请期待', { icon: 5 });
                }
            }
        })
    })
</script>

{% endblock %}